<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">Dialog - Ajax Form</h1>
		<div class="entry">
				<p>Dialogs can contain forms to provide ajax interaction.</p>
							
					<p:commandButton type="button" value="Show" onclick="dlg.show()" />
		
					<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false">
						<h:form>

							<h:panelGrid columns="2" style="margin-bottom:10px">
								<h:outputLabel for="firstname" value="Firstname:" />
								<p:inputText id="firstname" value="#{pprBean.firstname}" />
							</h:panelGrid>

							<p:commandButton value="Submit" update=":display" oncomplete="dlg.hide();"/>
								
						</h:form>
					</p:dialog>
						
					<p:outputPanel id="display" style="display:block;margin-top:10px;">
						<h:outputText id="name" value="Hello #{pprBean.firstname}" rendered="#{not empty pprBean.firstname}"/>
					</p:outputPanel>
				
					<h3>Source</h3>
					<p:tabView>
						<p:tab title="dialogForm.xhtml">
							<pre name="code" class="xml">
&lt;p:commandButton type="button" value="Show" onclick="dlg.show()" /&gt;
		
&lt;p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false"&gt;
	&lt;h:form&gt;

		&lt;h:panelGrid columns="2" style="margin-bottom:10px"&gt;
			&lt;h:outputLabel for="firstname" value="Firstname:" /&gt;
			&lt;p:inputText id="firstname" value="\#{pprBean.firstname}" /&gt;
		&lt;/h:panelGrid&gt;

		&lt;p:commandButton value="Submit" update=":display" oncomplete="dlg.hide();"/&gt;
			
	&lt;/h:form&gt;
&lt;/p:dialog&gt;
	
&lt;p:outputPanel id="display" style="display:block;margin-top:10px;"&gt;
	&lt;h:outputText id="name" value="Hello \#{pprBean.firstname}" rendered="\#{not empty pprBean.firstname}"/&gt;
&lt;/p:outputPanel&gt;
							</pre>
						</p:tab>
					</p:tabView>
					
			</div>
				
	</ui:define>
</ui:composition>